.dragzone
  -webkit-app-region: drag;
  position: fixed;
  display: none;


.loading
    position: absolute
    background-color: $BgColor1
    -webkit-user-select: none
    width 100%
    height 100%
    opacity 1
    overflow hidden
    margin auto
    left 0
    right 0
    padding-top $TitleHeight
    -webkit-backface-visibility hidden

    .state
        color #fff
        font-family $MainFont
        -webkit-font-smoothing antialiased
        text-align center
        width 40%
        z-index 11
        margin auto
        left 0
        right 0
        -webkit-backface-visibility hidden

        position: relative
        top: calc(50% - 87.5px)

        .value
            color #fff
            font-family $MainFont
            -webkit-font-smoothing antialiased

.text_peers
    position relative
    color #fff
    font-family $MainFont
    -webkit-font-smoothing antialiased  
    float left
    font-size 12px
    margin-left 5px

.value_peers
    position relative
    color #fff
    font-size 12px
    font-family $MainFont
    -webkit-font-smoothing antialiased  
    float left


.value_download
    display none
    position relative
    color #fff
    font-size 12px
    font-family $MainFont
    -webkit-font-smoothing antialiased  
    float left
    margin-left 10px

.download_speed
    position relative
    color #fff
    font-size 12px
    font-family $MainFont
    -webkit-font-smoothing antialiased  
    margin-left 5px
    float left
.loading-background
    position: absolute
    width: 100%
    height: 100%
    background-repeat no-repeat
    background-position center
    background-size cover

.loading-background-overlay
    width 100%
    height 100%
    position absolute
    opacity .7
    background-color #000

.download_percent
    position relative
    color #fff
    font-size 12px
    font-family $MainFont
    -webkit-font-smoothing antialiased  
    float right

.download_speed_plyer
    position relative
    color #fff
    font-size 12px
    font-family $MainFont
    -webkit-font-smoothing antialiased  
    margin-left 5px

.upload_speed_plyer
    position relative
    color #fff
    font-size 12px
    font-family $MainFont
    -webkit-font-smoothing antialiased  
    margin-left 5px
    
.loading-cancel
    top 60px
    z-index 2
    position absolute
    cursor pointer
    width 120px
    height 35px
    margin auto
    left 0
    right 0
    -moz-border-radius 3px
    -webkit-border-radius 3px
    border-radius 3px
    -moz-background-clip padding
    -webkit-background-clip padding-box
    background-clip padding-box
    background-color $ButtonBg
    -webkit-backface-visibility hidden
    transition all .5s
    
    &:hover
        background: $ButtonBgHover
        text-decoration: none

    &:active
        box-shadow: inset 0 1px 4px rgba(0,0,0,0.6)
        background: $ButtonBgActive

    .loading-cancel-text
        -webkit-backface-visibility hidden
        position relative
        color #fff
        font-family $MainFont, $Font, $AlternateFont
        -webkit-font-smoothing antialiased
        text-align center
        top 12px
        font-size 12px

.loading-progressbar
  position relative
  margin-bottom 10px
  margin-top 10px
  background-color #bababa
  border-radius 13px
  //padding 3px
  & > div
    background-color $ButtonBgActive
    height 5px
    border-radius 13px
    left 0px

#player,
.player
    width: 100%
    height: 100%

.player
    z-index: 10
    position: absolute;
    overflow: hidden;
    background-color: black

    video
        width: 100%
        height: 100%

    .details-player
        right: 10px
        position: absolute
        top: 20px
        z-index: 20

    .close-info-player
        top: -1px
        right: 18px
        position: absolute
        color: #fff
        font-size: 2em
        font-smoothing: antialiased
        transition all .5s
        
        &:hover
          cursor: pointer
          color: #a3a5a7


    .quality-info-player
        position: absolute
        right: 95px;
        top: 3px;
        font-size: 1.3em;
        color: #FFFFFF
        font-weight: bold

    .eye-info-player
        position: absolute
        font-size: 2em
        color: #FFFFFF
        top: -1px
        right: 55px
        z-index 4
        transition all .5s

        &:hover
          cursor: pointer
          color: #a3a5a7
          

    .eye-info-player:hover + .details-info-player
        display: block

    .details-info-player
        display: none
        width: 185px
        background: rgba(31, 31, 31, 0.74)
        color: #FFF
        padding: 10px
        font-family: sans-serif
        font-size: 14px
        top: 32px
        position: absolute
        right: 45px
        border-radius: 2px


    .details-info-player > span
        margin-bottom: 5px
        display: -webkit-inline-box
        margin-right: 3px
    
    .arrow-up 
        width: 0
        height: 0
        border-left: 6px solid rgba(0, 0, 0, 0)
        border-right: 6px solid rgba(0, 0, 0, 0)
        border-bottom: 6px solid rgba(31, 31, 31, 0.74)
        top: -6px
        right: 15px
        position: absolute

.player-title
  position absolute
  top 18px
  left 16px
  color #fff
  font-family $Font, $AlternateFont
  font-size 17px
  max-width 85%
  z-index 3
  overflow hidden
  white-space nowrap
  text-overflow ellipsis
  padding-bottom 3px


.vjs-quality-button
    color #fff
    right 15px
    top 8px
    
.vjs-subtitles-button
    top 12px

.vjs_smallersub_button.vjs-control
    top 13px

.vjs_biggersub_button.vjs-control
    top 13px

.player-header-background
  position absolute
  background -webkit-linear-gradient(black, transparent)!important
  width 100%!important
  height 75px!important
  z-index 3
  top 0

/*! videojs-overlay - v0.0.0 - 2014-4-26
 * Copyright (c) 2014 Brightcove
 * Licensed under the Apache-2.0 license. */

/**
 * Some handy default styles for overlays.
 */
.vjs-overlay,
.vjs-overlay.vjs-overlay-top-left 
  position absolute
  width 33%
  font-size 14px
  background-color transparent
  color: #fff
  font-family "Open Sans Semibold"
  -webkit-font-smoothing antialiased
  padding 10px
  border-radius 3px
  top 65px
  left 5px
  /*text-align center*/


/* overlay alignment styles */
.vjs-overlay.vjs-overlay-top 
  margin-left: -16.5%;
  left: 50%;

.vjs-overlay.vjs-overlay-top-right 
  left: auto
  right: 5px

.vjs-overlay.vjs-overlay-left 
  top 50%
  margin-top -15px

.vjs-overlay.vjs-overlay-right 
  left auto
  right 5px
  top 50%
  margin-top -15px

.vjs-overlay.vjs-overlay-bottom 
  margin-left -16.5%
  left 50%
  top auto
  bottom 4.5em

.vjs-overlay.vjs-overlay-bottom-left 
  bottom 4.5em
  top auto
  left 5px

.vjs-overlay.vjs-overlay-bottom-right
  bottom 4.5em
  top auto
  left auto
  right 5px

.video-js.vjs-fullscreen.vjs-user-inactive .vjs-tech
  // make sure the cursor disappear in fullscreen
  pointer-events none
